<!doctype html>
<html lang="en">

<head>
    <title>医院</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <nav class="navbar navbar-expand-md  navbar-dark" style="background-color: #0991f3;">
        <a class="navbar-brand" href="#">荔枝医院 🏥 </a>
        <div class="collapse navbar-collapse" id="collapsibleNavId">

            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

                <li class="nav-item active ml-3">
                    <a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item ml-3">
                    <a class="nav-link" href="#">文件</a>
                </li>

                <li class="nav-item dropdown ml-3">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">编辑</a>

                    <div class="dropdown-menu" aria-labelledby="dropdownId">
                        <a class="dropdown-item" href="#">撤销</a>
                        <a class="dropdown-item" href="#">恢复</a>
                        <a class="dropdown-item" href="#">剪切</a>
                        <a class="dropdown-item" href="#">复制</a>
                    </div>
                </li>
                <li class="nav-item dropdown ml-3">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">选择</a>

                    <div class="dropdown-menu" aria-labelledby="dropdownId">
                        <a class="dropdown-item" href="#">撤销</a>
                        <a class="dropdown-item" href="#">恢复</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">剪切</a>
                        <a class="dropdown-item" href="#">复制</a>
                    </div>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                <button class="btn btn-danger my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

    <div class="jumbotron jumbotron-fluid py-3">
        <div class="container">

            <h1 class="display-4">线上挂号系统</h1>
            <p class="lead">荔枝医院</p>
        </div>

        <nav class="breadcrumb">
            <a class="breadcrumb-item" href="index.html">科室导航</a>
            <a class="breadcrumb-item" href="patient.html">就诊人管理</a>
            <a class="breadcrumb-item" href="reservationinfo.html">我的预约信息</a>
        </nav>
    </div>

    <div class="container" id="app">
        <div class="row">
            <table class="table offset-3 col-md-4">
                <tbody v-if="schedul!=null">
                    <tr>
                        <td>医生</td>
                        <td>{{schedul.doctor.name}}</td>
                    </tr>
                    <tr>
                        <td>时间</td>
                        <td>{{schedul.time}}</td>
                    </tr>
                    <tr>
                        <td>叫号顺序</td>
                        <td>{{schedul.count+1}}</td>
                    </tr>
                    <tr>
                        <td>就诊人</td>
                        <td>

                            <div v-if="patient!=null">{{patient.name}} {{patient.id_card}}</div>
                            <div class="form-group mt-5">

                                <select class="form-control" v-model="patient">
                                    <option :value="patient" v-for="(patient, index) in patientArr" :key="index">
                                        {{patient.name}} {{patient.id_card}}</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <a @click="addAppoint()" class="btn btn-danger btn-block">确定预约</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                schedul: null,
                patientArr: [],
                patient: null
            }
        },
        mounted() {
            this.schedul = JSON.parse(sessionStorage.getItem("schedul"));
            this.selectAllpatient();
        },
        methods: {

            selectAllpatient() {
                axios.get(`http://120.24.192.41:8080/api/patient`)
                    .then((response) => {
                        this.patientArr = response.data;
                    })
                    .catch(function (error) {
                    })
            },
            addAppoint() {

                let appoint = {
                    doctor: this.schedul.doctor,
                    patient: this.patient,
                    clinic: this.schedul.clinic,
                    time: this.schedul.time,
                    num: this.schedul.count + 1
                }
                axios.post(`http://120.24.192.41:8080/api/appoint/${this.schedul.id}`, appoint)
                    .then(function (response) {
                        if (response.data) {
                            alert("预约成功！现在跳转到预约信息页面查看！！");
                            location.href = "appointmentinfo.html"
                        } else {
                            alert("预约失败！")
                            location.href = "index.html";
                        }
                    })
                    .catch(function (error) {
                    })
            }
        },
    })
</script>